<template>
  <el-card class="system-message-page">
    <div class="header">
      <el-button type="primary" @click="openCreateDialog"
        >创建系统消息</el-button
      >
    </div>

    <el-table :data="messages" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="content" label="内容" />
      <el-table-column prop="createdAt" label="创建时间" />
      <el-table-column prop="updatedAt" label="更新时间" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="mini" @click="editMessage(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="deleteMessage(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 对话框 -->
    <el-dialog :title="dialogTitle" v-model="showDialog">
      <el-form :model="form">
        <el-form-item label="标题" required>
          <el-input v-model="form.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="内容" required>
          <el-input
            v-model="form.content"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="submitMessage">{{
          dialogTitle
        }}</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
  getSystemMessageList,
  createSystemMessage,
  updateSystemMessage,
  deleteSystemMessage,
} from "@/api/systemMessage";

const messages = ref([]);
const showDialog = ref(false);
const form = ref({ id: null, title: "", content: "" });
const dialogTitle = ref("创建系统消息");

// 获取系统消息列表
const fetchMessages = async () => {
  const res = await getSystemMessageList();
  if (res.code === 0) {
    messages.value = res.data.map((item) => ({
      id: item.ID,
      title: item.title,
      content: item.content,
      createdAt: new Date(item.CreatedAt).toLocaleString(),
      updatedAt: new Date(item.UpdatedAt).toLocaleString(),
    }));
  } else {
    console.error("获取系统消息失败:", res.msg);
  }
};

// 提交创建或更新的消息
const submitMessage = async () => {
  const messageData = {
    title: form.value.title,
    content: form.value.content,
  };

  const api = form.value.id ? updateSystemMessage : createSystemMessage;
  const res = await api(form.value.id ? form.value : messageData);
  if (res.code === 0) {
    await fetchMessages(); // 更新数据
    showDialog.value = false; // 关闭弹窗
  } else {
    console.error("提交消息失败:", res.msg);
  }
};

// 打开创建消息弹窗
const openCreateDialog = () => {
  form.value = { id: null, title: "", content: "" };
  dialogTitle.value = "创建系统消息";
  showDialog.value = true;
};

// 编辑消息
const editMessage = (message) => {
  form.value = { ...message };
  dialogTitle.value = "编辑系统消息";
  showDialog.value = true;
};

// 删除消息并刷新列表
const deleteMessage = async (id) => {
  const res = await deleteSystemMessage(id);
  if (res.code === 0) {
    await fetchMessages(); // 删除后重新获取数据
  } else {
    console.error("删除消息失败:", res.msg);
  }
};

// 页面加载时获取消息列表
onMounted(() => fetchMessages());
</script>

<style scoped>
.system-message-page {
  padding: 20px;
}
.header {
  margin-bottom: 20px;
}
</style>
